<template>
  <div class="choose">
    <el-card class="box-card">
      <!-- 时间 -->
      <div class="chose-time">
        <span>时间</span>
        <div class="block">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="picker"
          >
            <template v-slot:range-separator>
              <i class="iconfont icon-daoda"></i>
            </template>
          </el-date-picker>
        </div>
      </div>
      <!-- 类型 -->
      <div class="chose">
        <span>类型</span>
        <el-select v-model="type" placeholder="请选择" class="start-time">
          <el-option
            v-for="item in typeOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 仰角 -->
      <div class="chose">
        <span>仰角</span>
        <el-select v-model="angle" placeholder="请选择" class="start-time">
          <el-option
            v-for="item in angleOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chose">
        <span>站点</span>
        <el-select v-model="core" placeholder="请选择" class="start-time">
          <el-option
            v-for="item in coreOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        >>
      </div>

      <div class="query">
        <el-button type="primary" @click="query">查询</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDoppler } from "@/api/zhjcright";
import moment from "moment";
export default {
  name: "Choose",
  components: {
    // ChooseTiltle,
  },
  data() {
    return {
      angle: 0,
      type: "CR37",
      core: null,
      time: [new Date(2023, 7, 5, 0, 0), new Date(2023,9,5,0,0)],
      typeOpt: [
        { value: "CR37", label: "CR37" },
        { value: "PPI19", label: "PPI19" },
        { value: "PPI27", label: "PPI27" },
        { value: "VIL57", label: "VIL57" },
      ],
      angleOpt: [
        {
          value: 0,
          label: 0,
        },
        {
          value: 30,
          label: 30,
        },
        {
          value: 45,
          label: 45,
        },
        {
          value: 60,
          label: 60,
        },
      ],
      coreOpt: [],
    };
  },
  methods: {
    async query() {
      //将时间转为字符串
      const beginTime = moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
      const endTime = moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      const options = {
        beginTime,
        endTime,
        ldType:this.type,
      }
      const leidaList = await getDoppler(options);
      if(leidaList.code != 200){
        return;
      }
      if(leidaList.data.length == 0){
        return;
      }
      console.log(leidaList)
      this.$emit("handleLeida",leidaList.data)
    },
  },
};
</script>

<style lang="scss" scoped>
.choose {
  background-color: rgba(13, 40, 53, 0.4);
  z-index: 10;
  .box-card {
    width: 100%;
    height: 11rem;
    overflow:auto;
    background-color: rgba(13, 40, 53, 0.4);
    border: none;
    .chose-time {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0rem;
      width: 100%;
      span {
        color: white;
        font-size: 15px;
        width: 10%;
      }
      .block {
        .picker {
          width: 90%;
          border: none;
          height: 35px;
          background-color: #3c6485;
          ::v-deep .el-range-input {
          color: white;
            border: none;
            background-color: #3c6485;
          }
        }
      }
    }
    .chose {
      margin-top: 1rem;
      display: flex;
      //   justify-content: flex-start;
      align-items: center;
      width: 100%;
      span {
        color: white;
        font-size: 15px;
        width: 10%;
      }
    }
    .query {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
    }
  }
}
.icon-daoda {
  color: #8eb4cc;
}
.select {
  width: 80%;
  outline: none;
  border: none;
  border-radius: 2px;
  background-color: #3c6485;
  height: 30px;
  padding: 2px 5px;
}
.custom-select {
  background-color: red;
}
::v-deep .el-input__inner {
  background-color: #3c6484;
  color: white;
  border: none;
}
.start-time ::v-deep .el-input__inner {
  width: 19rem;
}
</style>
